<template>
  <form-model
    ref="createModal"
    :formTitle="$t('editService')"
    :width="608"
    :form="form"
    :rules="rules"
    @ok="handleOk"
  >
  <a-form-model
    ref="ruleForm"
    :rules="rules"
    :model="form"
  >
    <!-- 服务归属域 -->
    <a-form-model-item
      :label="$t('fwgsy')"
    >
      <service-belong-select
        disabled
        :default-value="form.serviceBelong"
      >
      </service-belong-select>
    </a-form-model-item>
    <!-- 服务分类 -->
    <a-form-model-item
      :label="$t('fwfl')"
    >
      <service-sale-cate-select
        disabled
        :default-value="form.serviceCategory"
      >
      </service-sale-cate-select>
    </a-form-model-item>
    <!-- 服务代码 -->
    <a-form-model-item
      :label="$t('serviceCode')"
    >
      <service-tem-select
        disabled
        :default-value="form.serviceCode"
      >
      </service-tem-select>
    </a-form-model-item>
    <!-- 是否已预置-->
    <!-- <a-form-model-item
      prop="enableState"
    >
      <template v-slot:label>
        <span>{{ $t('presetOrNot') }}</span>
        <question-mark-tip
          :tip-title="$t('isEnableStateTip')"
          :popupContainer="$commonFun.getPopupContainer"
        ></question-mark-tip>
      </template>
      <chose-yes-no
        disabled
        :default-value="form.enableState"
        @changeoption="changeoption($event, 'enableState')"></chose-yes-no>
    </a-form-model-item> -->
    <!-- 是否可售卖-->
    <a-form-model-item
      prop="saleState"
    >
      <template v-slot:label>
        <!-- <span>{{ $t('whetherSold') }}</span> -->
        <span>{{ $t('销售方式') }}</span>
        <question-mark-tip
          :tip-title="$t('当前服务在该车型上的销售方式')"
          :popupContainer="$commonFun.getPopupContainer"
        ></question-mark-tip>
      </template>
        <a-select
          mode="default"
          @change="changeoption($event, 'saleState')"
          :value="form.saleState"
        >
          <a-select-option v-for="item in saleStateType" :key="item.id" :value="item.id">
            {{ $t(item.name) }}
          </a-select-option>
        </a-select>
    </a-form-model-item>
    <!-- 是否已激活-->
    <a-form-model-item
      prop="activeState"
    >
      <template v-slot:label>
        <!-- <span>{{ $t('whetherActivated') }}</span> -->
        <span>{{ $t('是否需激活') }}</span>
        <!-- <question-mark-tip
          :tip-title="$t('isActiveStateTip')"
          :popupContainer="$commonFun.getPopupContainer"
        ></question-mark-tip> -->
      </template>
      <chose-yes-no
        :default-value="form.activeState"
        @changeoption="changeoption($event, 'activeState')"></chose-yes-no>
    </a-form-model-item>
    <!-- 是否需要学习 -->
      <a-form-model-item prop="needStudy" :label="$t('needToLearn')">
        <need-to-learn-select
          :default-value="form.needStudy"
          placeholderText="请选择在该车型下是否需要学习"
          @changeoption="changeoption($event, 'needStudy')"
        >
        </need-to-learn-select>
      </a-form-model-item>
      <!-- 学习视频 -->
      <a-form-model-item prop="studyUrls" v-if="form.needStudy">
        <template slot="label">
          <span>
            {{ $t('learnUrl') }}
          </span>
        </template>
        <a-input
          v-model="form.studyUrls"
          :placeholder="$t('请输入对应智驾服务学习视频地址')"
        ></a-input>
      </a-form-model-item>
      <!-- 功能测试问卷 -->
      <a-form-model-item prop="examUrl" v-if="form.needStudy" :label="$t('功能学习测试问卷')">
        <a style="position: absolute; right: 0; top: -38px" @click="showExamUrlVisible()">{{ $t('edit') }}</a>
        <service-sale-exam-select
          :default-value="form.examUrl"
          @changeoption="changeoption($event, 'examUrl')"
        ></service-sale-exam-select>
      </a-form-model-item>
    <!-- 服务供应商 -->
    <a-form-model-item
      :label="$t('serviceSupplier')"
      prop="supplierList"
      v-if="form.activeState==1?true:false"
    >
      <third-supplier-select
        :default-value="form.supplierList"
        mode="multiple"
        @changeoption="changeoption($event, 'supplierList')"
      >
      </third-supplier-select>
    </a-form-model-item>
</a-form-model>
    <!-- 编辑考试地址 -->
    <a-modal
      :width="1100"
      :visible="examUrlVisible"
      title="编辑考试地址"
      :destroyOnClose="true"
      :footer="null"
      :bodyStyle="{ height: '500px', overflowY: 'auto' }">
      <template #closeIcon>
        <div class="ant-modal-operate">
          <a-button @click="addSeviceBelongCate()">
            <i class="iconfont icon-xinjian"></i>
          </a-button>
          <a-icon type="close" class="close-btn" @click="handleCancelExamUrlVisible"/>
        </div>
      </template>
      <edit-service-belong ref="editServiceBelong" style="padding: 0" editWhich="examUrl"></edit-service-belong>
    </a-modal>
  </form-model>

</template>
<script>
import ServiceSaleCateSelect from '@/views/components/ServiceSaleCateSelect'
import ServiceBelongSelect from '@/views/components/ServiceBelongSelect'
import ServiceTemSelect from '@/views/components/ServiceTemSelect'
import ThirdSupplierSelect from '@/views/components/ThirdSupplierSelect.vue'
import ChoseYesNo from '@/views/components/needToLearnSelect'
import FormModel from '@/components/SelfModal/FormModel'
import QuestionMarkTip from '@/views/components/QuestionMarkTip'
import { mapState } from 'vuex'
import needToLearnSelect from '@/views/components/needToLearnSelect'
import ServiceSaleExamSelect from '@/views/components/ServiceSaleExamSelect'
import EditServiceBelong from '@/views/software/serviceConfig/components/EditServiceBelong.vue'
export default {
  name: 'ManagedServicesEditService',
  components: {
    FormModel,
    QuestionMarkTip,
    ServiceSaleCateSelect,
    ServiceBelongSelect,
    ServiceTemSelect,
    ChoseYesNo,
    ThirdSupplierSelect,
    needToLearnSelect,
    ServiceSaleExamSelect,
    EditServiceBelong
  },
  props: {
    time: {
      type: Number,
      default: 0
    },
    modelId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      examUrlVisible: false,
      form: { },
      rules: {
        saleState: [{ required: true, message: this.$t('pleaseSelect') }],
        activeState: [{ required: true, message: this.$t('pleaseSelect') }],
        supplierList: [{ required: true, message: this.$t('pleaseSelect') }],
        needStudy: [{ required: true, message: this.$t('pleaseSelect') }],
        studyUrls: [{ required: true, message: this.$t('pleaseSelect') }],
        examUrl: [{ required: true, message: this.$t('pleaseSelect') }]
      },
    }
  },
  mounted () {
    this.$store.dispatch('getServiceSaleCateFlagDictCodeData')
    this.$store.dispatch('getServiceSaleBelongFlagDictCodeData')
    this.$store.dispatch('getThirdSupplierDictCodeData')
  },
  computed: {
    ...mapState({
      saleStateType: (state) => state.serviceConfig.saleStateType
    })
  },
  methods: {
    addSeviceBelongCate () {
      this.$refs.editServiceBelong.addList()
    },
    showExamUrlVisible () {
      this.examUrlVisible = true
    },
    handleCancelExamUrlVisible () {
      this.examUrlVisible = false
      this.$store.dispatch('getServiceSaleExamCodeDictCodeData')
    },
    handleEdit (record) {
      const vm = this
      vm.form = { ...record }
      // 是否已预置是否可售是否激活默认是是否 且不能修改
      // vm.form.enableState = 1
      // vm.form.saleState = 0
      // vm.form.activeState = 0
      const supplierList = []
      if (Array.isArray(vm.form.supplierList) && vm.form.supplierList.length) {
        vm.form.supplierList.forEach(element => {
          supplierList.push({ key: element.supplierId, label: element.supplierName })
        })
      }
      vm.$set(vm.form, 'supplierList', supplierList)
      vm.$refs.createModal.add()
    },
    changeoption (event, key) {
      const vm = this
      vm.$set(vm.form, key, event)
      this.$nextTick(()=>{
        this.$refs.ruleForm.validateField(key)
      })
    },
    handleOk () {
      this.$refs.ruleForm.validate(valid => {
        if (!valid) {
          reject(valid)
          return
        }else{
          const vm = this
          const values = {
            modelId: vm.modelId,
            serviceId: vm.form.serviceId,
            activeState: vm.form.activeState,
            enableState: vm.form.enableState,
            saleState: vm.form.saleState,
            needStudy: vm.form.needStudy,
            studyUrls: vm.form.studyUrls,
            examUrl: vm.form.examUrl,
          }
          const supplierList = []
          vm.form.supplierList.forEach(element => {
            supplierList.push({ supplierId: element.key, supplierName: element.label })
          })
          values.supplierList = supplierList
          vm.$api.editServiceByModel(values).then(() => {
            vm.$refs.createModal.visible = false
            vm.$emit('refreshData')
          }).finally(() => {
            vm.$refs.createModal.confirmLoading = false
          })
        }
      })

    }
  }
}
</script>
<style lang="less" scoped>
    .ant-modal-operate {
      margin-left: -22px;
        height: 100%;
        display: flex;
        align-items: center;
        .close-btn:hover{
          color: rgba(0, 0, 0, 0.45);
        }
        button {
          border-radius: 16px;
          width: 32px;
          height: 32px;
          padding: 0;
          margin-right: 10px;
          i {
            margin: auto;
          }
        }
    }
</style>
